<template>
  <div class="container">
    <div class="back-btn" @click="back()"></div>
    <div class="scene-title">学校</div>
    <div
      class="scene-image"
    >
      <img :draggable="false" src="../assets/images/sence/school/school-default.png" alt="">
<!--      <img v-else :draggable="false" src="../assets/images/sence/school/school.png" alt="">-->
      <img :class="['cover-image', targetStatus === 'success' ? 'temp-down' : '']" :draggable="false" src="../assets/images/sence/school/school-hover.png" alt="">

      <div
        id="ac"
        :class="['ac']"
        @dragenter="handleDragEnter"
        @dragleave="handleDragleave"
        @dragexit="handleDragexit"
      >
        <img :draggable="false" v-if="targetStatus === 'active'" src="../assets/images/sence/school/ac-unactive.png" alt="">
        <img :draggable="false" v-else-if="targetStatus === 'enter'" src="../assets/images/sence/school/ac-run.png" alt="">
        <img :draggable="false" v-else-if="targetStatus === 'error'" src="../assets/images/sence/school/ac-error.png" alt="">
        <img :draggable="false" v-else-if="targetStatus === 'success'" src="../assets/images/sence/school/ac-active.png" alt="">
        <img :draggable="false" v-else src="../assets/images/sence/school/ac-default.png" alt="">
        <img v-if="targetStatus === 'success'" class="ac-run leaf" :draggable="false" src="../assets/images/sence/school/wind.png" alt="">
        <p class="name" style="color: #20e8ea">物联网空调</p>
      </div>
    </div>
    <div class="chip" v-if="targetStatus !== 'success'">
      <div class="chip-item" @dragstart="(e) => handleDragstart(e, 910)" @dragend="(e) => handleDragend(e, 910)">
        <img class="draggable" :draggable="isStart === null" v-if="active910" src="../assets/images/common/910-active.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="success910" src="../assets/images/common/910-success.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="error910" src="../assets/images/common/910-error.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else src="../assets/images/common/910-default.png" alt="">
      </div>
      <div class="chip-item" @dragstart="(e) => handleDragstart(e, 310)" @dragend="(e) => handleDragend(e, 310)">
        <img class="draggable" :draggable="isStart === null" v-if="active310" src="../assets/images/common/310-active.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="success310" src="../assets/images/common/310-success.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else-if="error310" src="../assets/images/common/310-error.png" alt="">
        <img class="draggable" :draggable="isStart === null" v-else src="../assets/images/common/310-default.png" alt="">
      </div>
    </div>
<!--    <div class="chip-tips" v-if="targetStatus !== 'success'">把芯片拖动到对应的边缘设备</div>-->
    <div class="run-tip success" v-if="targetStatus === 'success'">成功运行~</div>
    <div class="run-tip error" v-if="targetStatus === 'error'">{{ rightChip === 310 ? 910 : 310 }}芯片不适合边缘计算！</div>
    <div class="run-success" v-if="targetStatus === 'success'">
      <div class="left">
        <div class="arrow img-box">
          <img :draggable="false" src="../assets/images/common/temp-up.png" alt="">
        </div>
        <div class="temp img-box">
          <div class="temp-up-box">
            <div class="aa"></div>
            <div class="bb"></div>
          </div>
          <img :draggable="false" src="../assets/images/common/temp-em.png" alt="">
        </div>
      </div>
      <div class="right">
        <div class="chart-box">
          <div class="chart">
            <!--            <div class="chart-bg">-->
            <!--              <img src="../assets/images/common/chart-bg.png" alt="">-->
            <!--            </div>-->
            <div class="chart-line">
              <img :draggable="false" src="../assets/images/common/chart.png" alt="">
            </div>
          </div>
          <p>数据吞吐量 单位：MB</p>
        </div>
        <div class="img-box right-arrow">
          <img :draggable="false" src="../assets/images/common/temp-up.png" alt="">
        </div>
      </div>
    </div>
    <div class="run-error"></div>
    <van-popup style="width: 100%; display: flex; justify-content: center" v-model="showTips" :overlay="false">
      <p class="success-tip" v-if="targetStatus === 'success'">成功运行</p>
      <p class="error-tip" v-else>{{ rightChip === 310 ? 910 : 310 }}芯片不适合边缘计算！</p>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'School',
  components: {},
  data() {
    return {
      rightChip: 310,
      isStart: null,
      current: null,
      active310: false,
      error310: false,
      success310: false,
      active910: false,
      error910: false,
      success910: false,
      targetStatus: 'default',
      toTarget: false,
      showTips: false,
      isBack: false
    }
  },
  computed: {},
  created() {
  },
  mounted() {
    if (this.$store.getters.school === true) {
      this.toTarget = true
      this.isStart = true
      this.handleDragend(null, this.rightChip)
    }
    if (this.$store.getters.school === false) {
      this.toTarget = true
      this.isStart = false
      this.handleDragend(null, this.rightChip)
    }
  },
  methods: {
    handleDragEnter(e) {
      console.log(e, 'enter')
      this.toTarget = true
      this.isStart = this.current === this.rightChip
      this['success' + this.current] = this.isStart
      this['error' + this.current] = !(this.isStart)
      // const animationDom = document.getElementById('robot')
      // animationDom.style.animationPlayState = 'paused'
      this.targetStatus = 'enter'
      e.preventDefault()
    },
    handleDragstart(e, name) {
      const sibName = name === 310 ? 910 : 310
      this['active' + sibName] = false
      this['error' + sibName] = false
      this['success' + sibName] = false
      this.current = name
      this['active' + name] = true
      this.targetStatus = 'active'
      console.log(e, 'dragstart', name)
    },
    handleDragend(e, name) {
      if (!this.toTarget) {
        this.isStart = null
        this.current = null
        this.active310 = false
        this.error310 = false
        this.success310 = false
        this.active910 = false
        this.error910 = false
        this.success910 = false
        this.targetStatus = 'default'
        this.toTarget = false
        this.showTips = false
        this.isBack = false
        return
      }
      this.current = null
      this['active' + name] = false
      // const animationDom = document.getElementById('robot')
      // animationDom.style.animationPlayState = ''
      this.targetStatus = this.isStart ? 'success' : 'error'
      this.$store.dispatch('app/setSchoolStatus', this.isStart)
      if (!this.isStart) {
        setTimeout(() => {
          this.isStart = null
          this.current = null
          this.active310 = false
          this.error310 = false
          this.success310 = false
          this.active910 = false
          this.error910 = false
          this.success910 = false
          this.targetStatus = 'default'
          this.toTarget = false
          this.showTips = false
          this.isBack = false
        }, 2000)
      }
      // this.showTips = true
      // setTimeout(() => {
      //   this.showTips = false
      // }, 3000)
      console.log(e, 'dragend', name)
    },
    handleDragleave(e) {
      if (!this.toTarget || !['success', 'error'].includes(this.targetStatus) ) return
      const dom = document.querySelector('.dnd-poly-drag-image')
      // console.log(dom, 'ddddd')
      if (dom) {
        dom.style.display = 'none'
      }
      console.log(e, 'dragleave')
    },
    handleDragexit(e) {
      console.log(e, 'handleDragexit')
      this.toTarget = false
      // e.preventDefault()
      // this.rightChip = 310
      // this.isStart = null
      // this.current = null
      // this.active310 = false
      // this.error310 = false
      // this.success310 = false
      // this.active910 = false
      // this.error910 = false
      // this.success910 = false
      // this.targetStatus = 'default'
      // this.toTarget = false
      // this.showTips = false
      // this.isBack = false
    },
    back() {
      this.$router.push({
        name: 'Home'
      })
    },
  },
  beforeDestroy() {
    // 全局存状态后，再次进来后的逻辑
    // const animationDom = document.getElementById('robot')
    // console.log(animationDom, 'animationDom')
    // animationDom.removeEventListener('animationiteration', this.changeBack);
  },
}
</script>

<style scoped lang="less">
/* 定义动画 */
//@keyframes moving {
//  0% {
//    transform: translate(0, 0);
//  }
//  50% {
//    //animation-timing-function: step-end;
//    transform: translate(130px, 75px); /* 斜线路径 */
//  }
//  100% {
//    transform: translate(0, 0);
//  }
//}
//
///* 应用动画到元素 */
//.run {
//  //animation: bling 0s ease-in-out forwards;
//  //animation-iteration-count: infinite;
//  animation-name: moving;
//  animation-duration: 15s;
//  animation-delay: 0ms;
//  animation-iteration-count: infinite;
//  //animation-iteration-count: 1;
//  animation-direction: normal;
//  //animation-timing-function: step-end;
//  animation-timing-function: linear;
//  //animation-timing-function: cubic-bezier(1, 1, 1, 1);
//  animation-fill-mode: none;
//  //animation-play-state: paused;
//  //animation-fill-mode: forwards;
//}

.scene-image {
  @keyframes imageUp {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes imageDown {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .cover-image {
    position: absolute;
    width: 80%;
    height: auto;
    top: 0;
    z-index: 9;
    &.temp-up {
      opacity: 1;
      animation-name: imageUp;
      animation-duration: 5s;
      animation-delay: 0ms;
      animation-iteration-count: 1;
      //animation-iteration-count: 1;
      animation-direction: normal;
      //animation-timing-function: step-end;
      animation-timing-function: linear;
      //animation-timing-function: cubic-bezier(1, 1, 1, 1);
      animation-fill-mode: none;
      //animation-play-state: paused;
      //animation-fill-mode: forwards;
    }
    &.temp-down {
      opacity: 0;
      animation-name: imageDown;
      animation-duration: 5s;
      animation-delay: 0ms;
      animation-iteration-count: 1;
      //animation-iteration-count: 1;
      animation-direction: normal;
      //animation-timing-function: step-end;
      animation-timing-function: linear;
      //animation-timing-function: cubic-bezier(1, 1, 1, 1);
      animation-fill-mode: none;
      //animation-play-state: paused;
      //animation-fill-mode: forwards;
    }
  }
  .ac {
    position: absolute;
    width: 50px;
    //background-color: #cccccc;
    left: 12%;
    top: 45%;
    z-index: 10;
    img {
      width: 30px;
      height: auto;
      //margin: 0 auto;
    }
    .ac-run {
      width: 50px;
      height: auto;
      position: absolute;
      left: 30px;
      top: 10px;
    }
    .name {
      font-size: 12px;
      width: 40px;
      position: absolute;
      bottom: -32px;
      left: -5px;
      text-align: center;
    }
  }
}

.run-success {
  position: absolute;
  //bottom: 15%;
  //width: 100%;
  //display: flex;
  //justify-content: space-around;
  //.img-box {
  //  img {
  //    display: block;
  //    width: 100%;
  //    height: auto;
  //  }
  //}
  .left {
    .temp {
      /* 定义动画 */
      @keyframes tempUp {
        0% {
          height: 10%;
          top: 60%;
        }
        100% {
          height: 60%;
          top: 10%;
        }
      }
      @keyframes tempDown {
        0% {
          height: 60%;
          top: 10%;
        }
        100% {
          height: 20%;
          top: 50%;
        }
      }
      .temp-up-box {
        position: absolute;
        z-index: 0;
        width: 8px;
        //height: 60%;
        //top: 10%;
        //border-radius: 10px 10px 0 0;
        background-color: #ccc;
        margin-left: 50%;
        transform: translateX(-50%);
        display: flex;
        &.temp-up {
          height: 60%;
          top: 10%;
          animation-name: tempUp;
          animation-duration: 5s;
          animation-delay: 0ms;
          animation-iteration-count: 1;
          //animation-iteration-count: 1;
          animation-direction: normal;
          //animation-timing-function: step-end;
          animation-timing-function: linear;
          //animation-timing-function: cubic-bezier(1, 1, 1, 1);
          animation-fill-mode: none;
          //animation-play-state: paused;
          //animation-fill-mode: forwards;
        }
        &.temp-down {
          height: 20%;
          top: 50%;
          animation-name: tempDown;
          animation-duration: 5s;
          animation-delay: 0ms;
          animation-iteration-count: 1;
          //animation-iteration-count: 1;
          animation-direction: normal;
          //animation-timing-function: step-end;
          animation-timing-function: linear;
          //animation-timing-function: cubic-bezier(1, 1, 1, 1);
          animation-fill-mode: none;
          //animation-play-state: paused;
          //animation-fill-mode: forwards;
        }
      }
    }
  }
}
</style>
